<template>
  <transition name="fade">
    <div v-if="show" class="dialog-overlay" @click="handleCancel">
      <div class="dialog" @click.stop>
        <div class="dialog-header">
          <h3>设置锁屏密码</h3>
          <button class="close-btn" @click="handleCancel">✕</button>
        </div>
        
        <div class="dialog-body">
          <p class="dialog-description">
            设置锁屏密码可以快速解锁屏幕，无需输入账号。锁屏密码将安全保存在本地。
          </p>
          <p class="dialog-description warning">
            ⚠️ 请牢记锁屏密码。如果忘记，需要重新登录并清除所有缓存。
          </p>
          
          <form @submit.prevent="handleSubmit">
            <div class="form-group">
              <label class="form-label">锁屏密码</label>
              <input
                ref="passwordInput"
                v-model="password"
                type="password"
                class="form-input"
                placeholder="设置锁屏密码"
                :class="{ error: error }"
                autocomplete="new-password"
              />
            </div>
            
            <div class="form-group">
              <label class="form-label">确认密码</label>
              <input
                v-model="confirmPassword"
                type="password"
                class="form-input"
                placeholder="再次输入密码"
                :class="{ error: error }"
                autocomplete="new-password"
              />
            </div>
            
            <div v-if="error" class="error-message">
              {{ error }}
            </div>
            
            <div class="dialog-actions">
              <button type="button" class="btn btn-secondary" @click="handleCancel">
                取消
              </button>
              <button type="submit" class="btn btn-primary" :disabled="!password || !confirmPassword">
                确定
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </transition>
</template>

<script setup lang="ts">
import { ref, watch, nextTick } from 'vue'

const props = defineProps<{
  show: boolean
}>()

const emit = defineEmits<{
  confirm: [password: string]
  cancel: []
}>()

const password = ref('')
const confirmPassword = ref('')
const error = ref('')
const passwordInput = ref<HTMLInputElement>()

watch(() => props.show, (newVal) => {
  if (newVal) {
    // 弹窗打开时重置表单
    password.value = ''
    confirmPassword.value = ''
    error.value = ''
    // 自动聚焦
    nextTick(() => {
      passwordInput.value?.focus()
    })
  }
})

function handleSubmit() {
  error.value = ''
  
  if (!password.value || !confirmPassword.value) {
    error.value = '请输入密码'
    return
  }
  
  if (password.value.length < 4) {
    error.value = '密码长度至少为 4 位'
    return
  }
  
  if (password.value !== confirmPassword.value) {
    error.value = '两次输入的密码不一致'
    return
  }
  
  emit('confirm', password.value)
}

function handleCancel() {
  emit('cancel')
}
</script>

<style scoped>
.dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20000;
}

.dialog {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  width: 90%;
  max-width: 480px;
  animation: scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.dialog-header h3 {
  font-size: 20px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0;
}

.close-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  font-size: 16px;
  color: #86868b;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #1d1d1f;
}

.dialog-body {
  padding: 24px 28px 28px;
}

.dialog-description {
  font-size: 14px;
  color: #86868b;
  line-height: 1.5;
  margin: 0 0 16px;
}

.dialog-description.warning {
  color: #ff3b30;
  background: rgba(255, 59, 48, 0.1);
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 59, 48, 0.2);
  margin-bottom: 24px;
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #1d1d1f;
  margin-bottom: 8px;
}

.form-input {
  width: 100%;
  padding: 12px 16px;
  background: white;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  font-size: 15px;
  color: #1d1d1f;
  outline: none;
  transition: all 0.2s;
  box-sizing: border-box;
}

.form-input:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}

.form-input.error {
  border-color: #ff3b30;
}

.form-input::placeholder {
  color: #86868b;
}

.error-message {
  padding: 12px 16px;
  background: rgba(255, 59, 48, 0.1);
  border: 1px solid rgba(255, 59, 48, 0.3);
  border-radius: 10px;
  color: #ff3b30;
  font-size: 13px;
  margin-bottom: 20px;
}

.dialog-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.btn {
  padding: 10px 24px;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-secondary {
  background: rgba(0, 0, 0, 0.05);
  color: #1d1d1f;
}

.btn-secondary:hover {
  background: rgba(0, 0, 0, 0.1);
}

.btn-primary {
  background: var(--accent-color);
  color: white;
}

.btn-primary:hover:not(:disabled) {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>

